@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Firefox */

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Webkit */

@-ms-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* IE */

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Opera and prob css3 final iteration */

.flashing {
    /* border: 1px solid #000; */
    -moz-transition: all 5s ease-in-out;
    -webkit-transition: all 5s ease-in-out;
    -o-transition: all 5s ease-in-out;
    -ms-transition: all 5s ease-in-out;
    transition: all 5s ease-in-out;
    /* order: name, direction, duration, iteration-count, timing-function */
    -moz-animation: blink normal 3s infinite ease-in-out;
    /* Firefox */
    -webkit-animation: blink normal 3s infinite ease-in-out;
    /* Webkit */
    -ms-animation: blink normal 3s infinite ease-in-out;
    /* IE */
    animation: blink normal 3s infinite ease-in-out;
    /* Opera and prob css3 final iteration */
}

.ms-controller {
    visibility: hidden
}

.hello {
    margin-bottom: 12px;
    height: 30px;
}

.container {
    position: relative
}

.area {
    /* background-color: rebeccapurple; */
    width: 41%;
    height: 490px;
    margin-left: 271px;
}

img {
    height: 100%;
    width: 100%;
}

.box {
    width: 25%;
}

.yellowArea {
    z-index: 1;
    position: absolute;
    left: 39%;
    top: 27px;
}

/* .yellowArea img {
    position: absolute;
    left: 15px;
    top: 5px
} */

.blueArea {
    position: absolute;
    left: 288px;
    top: 217px;
}

.boxLeft {
    cursor: pointer;
    width: 140px;
    color: white;
    position: absolute;
    top: 55px;
    left: 5px;
}

.boxRigth {
    cursor: pointer;
    width: 140px;
    color: white;
    position: absolute;
    top: 221px;
    left: 154px;
}

.boxTop {
    cursor: pointer;
    width: 140px;
    color: white;
    position: absolute;
    top: 15px;
    left: -5px;
}

.boxButtom {
    cursor: pointer;
    width: 140px;
    color: white;
    position: absolute;
    top: 221px;
    left: 161px;
}

.boxAnimation {
    display: block;
}

.right {
    display: block;
}

.top {
    display: block;
}

.left {
    display: block;
}

.buttom {
    display: block;
}

/* .blueArea img {
    position: absolute;
    left: 20px;
    top: 7px
} */